<template>
	<view class="bd-nav">
		<view class="back">
			<view class="list">
				<view class="item" :class="active==index?'active':''" v-for="(item,index) in list" :key='index'
					@click="setActive(index)">
					{{item.name}}
				</view>
			</view>
			<view class="title">
				—— {{list[active].name}} ——
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'app-head-navigation',
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				}
			},
			active: {
				type: Number,
				default: 0
			},
		},
		methods: {
			setActive(index) {
				// console.log(item);
				this.$emit('click', index);
			},
		},
		data() {
			return {
				activeIndex: 0,
				scrollLeft: 0
			}
		},
		watch: {
			list: {
				handler(newVal) {
					for (let i = 0; i < newVal.length; i++) {
						// console.log(newVal)
						if (newVal[i].active && i > 1) {
							this.activeIndex = i - 2;
						} else if (newVal[i].active && i <= 1) {
							this.activeIndex = 0;
						}
					}
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.title{
		color: #555;
		text-align: center;
	}
	.list {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;

		.item {
			width: calc(50% - 10rpx);
			margin: 10rpx 5rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			background-color: #2a2a2a;
			border-radius: 10rpx;
		}

		.active {
			color: #fdba00;
		}
	}

	.back {
		background-color: #eee;
	}
</style>